<template>
  <div class="foot">
    <div class="foot-server">
      <div class="container">
        <div class="server-top">
          <ul>
            <li>
              <span class="iconfont icon-buoumaotubiao46"></span>
              预约维修服务
            </li>
            <li>
              <span class="iconfont icon-7tianwuliyoutuihuo"></span>
              7天无理由退货
            </li>
            <li>
              <span class="iconfont icon-15tianwuliyoutuihuo"></span>
              15天免费换货
            </li>
            <li>
              <span class="iconfont icon-liwu"></span>
              满99元包邮
            </li>
            <li>
              <span class="iconfont icon-ditu"></span>
              520余家售后网点
            </li>
          </ul>
        </div>
        <div class="server-bottom">
          <dl>
            <dt>帮助中心</dt>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
          </dl>
          <dl>
            <dt>服务支持</dt>
            <dd>售后政策</dd>
            <dd>自主服务</dd>
            <dd>相关下载</dd>
          </dl>
          <dl>
            <dt>线下门店</dt>
            <dd>小米之家</dd>
            <dd>服务网点</dd>
            <dd>授权体验店</dd>
          </dl>
          <dl>
            <dt>关于小米</dt>
            <dd>了解小米</dd>
            <dd>加入小米</dd>
            <dd>投资者关系</dd>
            <dd>企业社会责任</dd>
            <dd>廉洁举报</dd>
          </dl>
          <dl>
            <dt>关注我们</dt>
            <dd>新浪微博</dd>
            <dd>官方微信</dd>
            <dd>联系我们</dd>
            <dd>公益基金会</dd>
          </dl>
          <dl>
            <dt>特色服务</dt>
            <dd>F码通道</dd>
            <dd>防伪码查询</dd>
            <dd>账户管理</dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="foot-copy">
      <div class="container">
        <div class="foot-logo">
          <img src="../../public/imgs/logo-mi.png" alt="" />
        </div>
        <div class="copy-info">
          <p>
            小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店
            | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 |
            小米商城用户协议 | 问题反馈 | Select Location
          </p>
          <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号<br>
            （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
            增值电信业务许可证 网络食品经营备案 京食药网食备202010048   食品经营许可证<br>
            违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav-footer'
}
</script>

<style lang="scss">
.foot {
  .foot-server {
    height: 332px;
    background: #fff;
    .container {
      .server-top {
        height: 99px;
        ul {
          height: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-size: 16px;
          color: #616161;
          li {
            width: 20%;
            text-align: center;
            height: 25px;
            line-height: 25px;
            border-left: 1px solid #e0e0e0;
            &:first-child {
              border: 0;
            }
            span {
              display: inline-block;
              width: 25px;
              height: 25px;
              font-size: 22px;
            }
          }
        }
      }
      .server-bottom {
        display: flex;
        dl {
          width: 16.6%;
          margin-top: 40px;
          dt {
            margin: -1px 0 26px;
            font-size: 14px;
            line-height: 1.25;
            color: #424242;
          }
          dd {
            margin: 10px 0 0;
            color: #757575;
            font-size: 12px;
          }
        }
      }
    }
  }
  .foot-copy {
    height: 186px;
    background: #fafafa;
    .container {
      padding-top: 30px;
      position: relative;
      .foot-logo {
        position: absolute;
        top: 30px;
        left: 0;
        width: 57px;
        height: 57px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .copy-info {
        padding-left: 65px;
        color: #757575;
        font-size: 12px;
        p:last-child{
          color: #b0b0b0;
        }
      }
    }
  }
}
</style>
